<template>
  <div>
    <div class="inp">
      <label>
        店铺名称：
        <el-input placeholder="请输入" v-model="name" clearable></el-input>
      </label>
      <label>
        店铺地址：
        <el-input placeholder="请输入" v-model="address" clearable></el-input>
      </label>
      <label>
        店铺介绍：
        <el-input placeholder="请输入" v-model="produce" clearable></el-input>
      </label>
      <button class="add" @click="add">提交</button>
    </div>

    <div class="search">
      <el-input placeholder="请输入要搜索的内容" v-model="val" clearable></el-input>
      <el-button type="primary" @click="search">搜索</el-button>
    </div>

    <el-table :data="goods" style="width: 100%;margin-top:20px;text-align:center;">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="店铺名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="店铺地址">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="店铺介绍">
              <span>{{ props.row.description }}</span>
            </el-form-item>
            <el-form-item label="店铺 ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="联系电话">
              <span>{{ props.row.phone }}</span>
            </el-form-item>
            <el-form-item label="评分">
              <span>{{ props.row.rating }}</span>
            </el-form-item>
            <el-form-item label="销售量">
              <span>{{ props.row.recent_order_num }}</span>
            </el-form-item>
            <el-form-item label="分类">
              <span>{{ props.row.category }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="店铺名称" prop="name"></el-table-column>
      <el-table-column label="店铺地址" prop="address"></el-table-column>
      <el-table-column label="店铺介绍" prop="description"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">添加食品</el-button>
          <el-button size="mini" type="danger" @click="del(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


     <el-pagination background layout="prev, pager, next" :total="100">
            
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      address: "",
      produce: "",
      val: "",
      goods: [],
      showlist: [],
    };
  },
  created() {
    this.$axios.get("/shopList.json").then((res) => {
      this.goods = res.data;
      this.showlist = res.data;
    });
  },
  methods: {
    add() {
      this.goods.unshift({
        name: this.name,
        address: this.address,
        description: this.produce,
      });

      this.name = "";
      this.address = "";
      this.produce = "";
    },
    handleEdit(index, row) {},
    search() {
      this.goods = [];
      console.log(this.val);
      this.showlist.map((ele) => {
        if (ele.name.includes(this.val)) {
          this.goods.push(ele);
        }
      });
      this.val = "";
      console.log(this.showlist);
    },
    del(index, row) {
      this.goods.splice(index, 1);
      localStorage.goods = JSON.stringify(this.goods);
    },
  },
};
</script>

<style scoped>
.inp {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.el-input {
  width: 50%;
}
.add {
  width: 100px;
  height: 40px;
  border: 1px solid lightblue;
  border-radius: 10px;
  cursor: pointer;
  background-color: lightseagreen;
  color: #fff;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.search {
  width: 100%;
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
.search .el-input {
  width: 25%;
}
.el-button {
  margin-left: 10px;
}
</style>